<template>
  <div class="app-container">
    <!-- <el-form :model="inpData" ref="queryRef" v-show="showSearch" :inline="true">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="inpData.roleName" placeholder="请输入角色名称" clearable style="width: 240px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="审核角色" prop="roleCode">
        <el-select v-model="inpData.auditRole" placeholder="审核角色" clearable style="width: 240px">
          <el-option label="" value="游客" />
          <el-option label="" value="厂家" />
          <el-option label="" value="团长" />
          <el-option label="" value="手工者" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="state">
        <el-select v-model="inpData.state" placeholder="审核状态" clearable style="width: 240px">
          <el-option label="" value="审核通过" />
          <el-option label="" value="审核失败" />
          <el-option label="" value="审核中" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
          v-hasPermi="['system:role:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:role:remove']">删除</el-button>
      </el-col> -->

      <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getUserList"></right-toolbar> -->
    </el-row>

    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
      <el-table-column label="用户角色" prop="userRole" :show-overflow-tooltip="true">
        <template #default="scope">
          <el-tag type="info" v-if="scope.row.userRole == 'visitor'">游客</el-tag>
          <el-tag type="success" v-if="scope.row.userRole === 'manufacturers'">厂家</el-tag>
          <el-tag type="info" v-if="scope.row.userRole == 'organizer'">团长</el-tag>
          <el-tag type="primary" v-if="scope.row.userRole === 'craftsmen'">手工者</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="userPhone" :show-overflow-tooltip="true" />
      <el-table-column label="用户性别" prop="sex" align="center" />
      <el-table-column label="用户年龄" prop="age" align="center" />
      <el-table-column label="审核状态" prop="userStatus" align="center">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.userStatus == 'Pass'">审核通过</el-tag>
          <el-tag type="danger" v-if="scope.row.userStatus === 'Lose'">审核失败</el-tag>
          <el-tag type="primary" v-if="scope.row.userStatus == 'Audit'">审核中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户地址" prop="address" align="center" />
      <el-table-column label="店铺名称" prop="shopName" align="center" />
      <el-table-column label="店铺执照" prop="shopLicense" align="center" />
      <el-table-column label="工作时长" prop="workHours" align="center" />
      <el-table-column label="服务区域" prop="serviceArea" align="center" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="success" @click="handlePass(scope.row)">通过</el-button>
          <el-button link type="danger" @click="handleNoPass(scope.row)">不通过</el-button>
          <!-- <el-tooltip content="修改" placement="top">
            <el-button link icon="Edit" type="primary" @click="handleUpdate(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link icon="Delete" type="danger" @click="handleDelete(scope.row)">
            </el-button>
          </el-tooltip> -->
          <!-- <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
            <el-button link icon="CircleCheck" @click="handleDataScope(scope.row)"
              v-hasPermi="['system:role:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
            <el-button link icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']">
            </el-button>
          </el-tooltip> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="Number(total)" @pagination="getUserList" />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form :model="modalData" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="modalData.roleName" placeholder="请输入角色名称" />
        </el-form-item>

        <el-form-item label="角色顺序" prop="orderNum">
          <el-input-number v-model="modalData.orderNum" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="modalData.state">
            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="JSON.parse(dict.value)">{{ dict.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="modalData.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getList, handleIsPass } from "@/api/role/request";

// 头部输入框数据 将来传递给后端进行筛选
const inpData = ref({
  roleName: "",
  userState: "",
  auditRole: ""
});
// 表格数据
const tableList = ref([]);

// 模态框的数据对象
const modalData = ref({
  roleName: "",
  orderNum: 0,
  status: 1
})
// 控制模态框的显示与隐藏
const open = ref(false);
// 控制表格的加载状态
const loading = ref(false);
// 控制搜索框的显示与隐藏
const showSearch = ref(true);
// 控制单选和多选按钮的状态
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
// 分页数据总数
const total = ref(0);
// 页面标题
const title = ref("");




const menuRef = ref(null);
onMounted(() => {
  getUserList();

})



// const data = reactive({
//   rules: {
//     roleName: [
//       { required: true, message: "角色名称不能为空", trigger: "blur" },
//     ],
//     roleCode: [
//       { required: true, message: "权限字符不能为空", trigger: "blur" },
//     ],
//     orderNum: [
//       { required: true, message: "角色顺序不能为空", trigger: "blur" },
//     ],
//   },
// });

// const { rules } = toRefs(data);

/** 获取用户列表 */
const getUserList = async () => {
  const res = await getList({
    SkipCount: 1,
    MaxResultCount: 10
  });
  total.value = res.data.totalCount;
  tableList.value = res.data.items;
}


/** 搜索按钮 收集输入框的数据 传递个后端 */
function handleQuery() {
  console.log(inpData.value, '搜索');
}
/** 重置按钮操作 */
function resetQuery() {
  console.log('重置');

}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}




/** 重置新增的表单以及其他数据  */

function reset() {

}

/** 添加角色 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加角色";
}
/** 修改角色 */
// function handleUpdate(row) { }



// 点击通过按钮
// 传递 用户的id，角色auditRole，状态 userStatus 给后端，
// 返回布尔类型 false表示不通过，true表示通过 ？疑问 那我点击按钮的意义是什么？

const handlePass = async (row) => {
  const res = await handleIsPass({
    id: row.id,
    auditRole: row.userRole,
    userStatus: row.userStatus
  });
  console.log(res);
}

// 点击不通过按钮
function handleNoPass(row) {
  console.log(row, '不通过');

}


/** 提交按钮 */
function submitForm() {

}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

</script>